<template>
	<div class="unified_portal_container wrapper">
		<div class="unified_portal_side">
			<user-info @setting="handleUserSetting"></user-info>
			<external-links />
			<my-apps></my-apps>
		</div>
		<grid-layout v-bind="layoutConfig" v-model:layout="showComponents" @layout-updated="layoutUpdatedEvent">
			<template #item="{ item }">
				<component v-memo="[item.component]" :is="item.component" :title="item.title" />
			</template>
		</grid-layout>
		<a-drawer v-bind="drawerConfig" :visible="setDrawer">
			<a-space>
				<a-button type="primary" @click="handleSubmitConfig">确定</a-button>
				<a-button type="primary" @click="handleCloseDrawer">关闭</a-button>
			</a-space>
		</a-drawer>
	</div>
</template>

<script setup lang="ts">
import myApps from './myApps.vue';
import userInfo from './userInfo.vue';
import { defineComponent, markRaw } from 'vue';
import externalLinks from './externalLinks.vue';
import { GridLayout, GridItem } from 'grid-layout-plus';
defineComponent({ components: { GridLayout, GridItem } });
const components = import.meta.glob('./cards/**/*.vue', { eager: true });
const layoutDatas = ref([
	{ title: '通知公告', x: 0, y: 0, w: 2, h: 5, i: 0, code: 'Notice' },
	{ title: '待办/已办', x: 2, y: 0, w: 1, h: 5, i: 1, code: 'PendingCompleted' },
	{ title: '我的课表', x: 0, y: 5, w: 2, h: 7, i: 2, code: 'CourseSchedule' },
	{ title: '学员预警', x: 2, y: 5, w: 1, h: 7, i: 3, code: 'StudentAlert' },
	{ title: '我的借阅图书', x: 0, y: 25, w: 2, h: 7, i: 4, code: 'BookLending' },
	{ title: '图片链接', x: 2, y: 12, w: 1, h: 2, i: 5, code: 'CommonImage' },
	{ title: '本学期被听查情况', x: 0, y: 32, w: 2, h: 2, i: 6, code: 'InspectionSituation' },
	{ title: '学习时长分布', x: 2, y: 14, w: 1, h: 5, i: 7, code: 'LearnDurationChart' },
	{ title: '系统直通车', x: 0, y: 12, w: 2, h: 7, i: 8, code: 'ShortcutKey' },
	{ title: '个人心理画像', x: 0, y: 34, w: 3, h: 6, i: 9, code: 'UserFigure' },
	{ title: '课堂视频学习数据', x: 0, y: 19, w: 3, h: 6, i: 10, code: 'VideoLearn' },
	{ title: '我的日程', x: 2, y: 25, w: 1, h: 9, i: 11, code: 'MyCalendar' },
	{ title: '周工作安排', x: 0, y: 40, w: 2, h: 9, i: 12, code: 'WorkSchedule' },
	{ title: '公文处理', x: 2, y: 40, w: 1, h: 9, i: 13, code: 'ClericalWork' },
	{ title: '今日教职工在岗状态', x: 2, y: 49, w: 1, h: 5, i: 14, code: 'TeacherStatus' },
	{ title: '今日学员上课状态', x: 2, y: 49, w: 1, h: 5, i: 15, code: 'StudentStatus' },
	{ title: '今日教学情况', x: 0, y: 49, w: 2, h: 6, i: 16, code: 'TeachSituation' },
	{ title: '今日调课', x: 0, y: 55, w: 2, h: 4, i: 17, code: 'CourseAdjusting' },
	{ title: '重大任务进展', x: 0, y: 59, w: 3, h: 4, i: 18, code: 'TaskProgress' }
]);
const layoutConfig = ref({
	colNum: 3,
	rowHeight: 60,
	autoSize: true,
	margin: [16, 16],
	isDraggable: false,
	isResizable: false,
	verticalCompact: true,
	useCssTransforms: true,
	class: 'unified_portal_body'
});
const drawerConfig = ref({
	height: 60,
	mask: false,
	footer: false,
	header: false,
	placement: 'top',
	unmountOnClose: true,
	class: 'unified_portal_setting'
});
const setDrawer = ref(false);
const showComponents = computed(() => {
	let allComponent = [];
	for (let path in components) {
		let componentModule = components[path];
		let component = componentModule.default;
		if (component && component.name) {
			allComponent.push(component);
		}
	}
	return layoutDatas.value.map((item) => {
		let component = allComponent.find((k) => k.name === item.code);
		return { ...item, component: markRaw(component) };
	});
});
const layoutUpdatedEvent = (data: any) => {
	// console.log(data);
};
const configGridLayout = (flag: boolean) => {
	let config = layoutConfig.value;
	config.isDraggable = flag;
	config.isResizable = flag;
};
const handleUserSetting = (flag: boolean) => {
	setDrawer.value = flag;
	configGridLayout(true);
};
const handleCloseDrawer = () => {
	setDrawer.value = false;
	configGridLayout(false);
};
const handleSubmitConfig = () => {};
</script>

<style lang="scss" scoped>
.unified_portal_container {
	display: flex;
	align-items: flex-start;
	padding-bottom: 16px;
}
.unified_portal_side {
	width: 320px;
	margin-right: 20px;
	box-sizing: border-box;
}
.unified_portal_body {
	flex: 1;
	margin: 0 -16px;
	overflow: hidden;
}
</style>
<style lang="scss">
.unified_portal_setting {
	bottom: unset;
	.arco-drawer-body {
		display: flex;
		align-items: center;
		padding: 14px;
		height: 100%;
	}
}
</style>
